<template>
  <div style="height: 100%">
    <div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['monitorName'],
  data () {
    return {
      charts: '',
      legentData: [],
      name: '',
      chartsData: [],
    }
  },
  computed: {
    options () {
      return {
        color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 10,
          data: this.legentData,
          textStyle:{
            fontSize: 14,//字体大小
            // color: '#ffffff'//字体颜色
          },
        },
        series: [{
          name: this.name,
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.chartsData
        }]
      }
    }
  },
  methods: {
    updateEchart (list, flag) {
      if (flag === 1) {
        this.name = '监测点占比'
        this.legentData = list.map(x => x.monitorTypeName)
        this.chartsData = list.map(x => {
          return { value: x.num, name: x.monitorTypeName }
        })
      } else {
        this.name = '仪器占比'
        this.legentData = list.map(x => x.modelName)
        this.chartsData = list.map(x => {
          return { value: x.num, name: x.modelName }
        })
      }
      this.charts.setOption(this.options, true)
    },
    // echart随着窗口改变
    echartResize () {
      this.charts.resize()
    }
  },
  mounted () {
    const Echarts = require('echarts')
    this.charts = Echarts.init(this.$el, null, { locale: 'ZH' })
    window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
